<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue.extend</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>Vue.extend 扩展：
    </h1>
    <span>返回的是一个“扩展实例构造器”，也就是预设了部分选项的Vue实例构造器。<br />
    经常服务于Vue.component用来生成组件，可以简单理解为当在模版中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。</span><br/>
    <a href="../index.html">返回</a>
    <hr />

    <author></author>

    <div id="author"></div>

    <div class="author"></div>


    <stus></stus>
    <div id="stus"></div>
    <script>
        //声明扩展
        var authorExtend = Vue.extend({
            template: "<p><a :href='authorURL'>{{authorname}}</a></p>",
            data: function() {
                return {
                    authorname: "Liyy",
                    authorURL: "http://lyyblog.cn"
                }
            }
        });
        console.log(authorExtend);
        //使用扩展
        //1. 直接调标签的形式
        new authorExtend().$mount('author');
        //2. 使用ID
        new authorExtend().$mount("#author");
        //3. 使用class
        new authorExtend().$mount(".author");

        //声明一个列表
        var stus = Vue.extend({
            template: "<ul><li v-for='(item,index) in students'>{{index}}:{{item.name}}--{{item.index}}</li></ul>",
            data: function() {
                return {
                    students: [{
                        name: 'C#',
                        index: 8
                    }, {
                        name: 'Java',
                        index: 1
                    }, {
                        name: 'Python',
                        index: 6
                    }, {
                        name: 'vue',
                        index: 3
                    }]
                }
            }
        });
        new stus().$mount("stus");
        new stus().$mount("#stus");
    </script>
</body>

</html>